<template>
  <div class="vip-list views-container">
    <choose-files
      ref="chooseFiles"
      :config="chooseFilesConfig"
      :changeEvt="uploadFileChange"
    ></choose-files>
    <div class="wlm-table">
      <div class="wlm-table-hearder-btn">
        <el-button
          size="small"
          type="primary"
          @click="$router.push({path:'/channel/weChatPublicUeditorSourceAdd'})"
        >创建微信图文素材</el-button>
        <el-button
          size="small"
          @click="syncMaterial(syncMaterialCallBack,'news')"
        >同步微信图文素材</el-button>
      </div>
      <div
        class="wlm-table-content"
        style="position: relative;"
      >
        <channel-source-loding
          :progressNum="progressNum"
          :isLoading="syncMaterialLoding"
        ></channel-source-loding>
        <el-row>
          <el-col
            :span="4"
            v-for="(item, index) in tableFormatData.userTable.tableData"
            :key="index"
          >
            <div class="file-box">
              <div class="file-item">
                <channel-list-header :item="item"></channel-list-header>
                <div class="file-content">
                  <div class="file-source news">
                    <div class="news-list">
                      <div
                        class="first-news"
                        v-for="(newsItem, newsIndex) in item.items"
                        v-if="newsIndex == 0"
                        :key="newsIndex"
                      >
                        <img :src="`${newsItem.thumb_url ? newsItem.thumb_url : getPath('default_picture.png')}`">
                        <p class="news-title">{{newsItem.title}}</p>
                        <div class="bg"></div>
                      </div>
                      <div
                        class="news clearfix"
                        v-for="(newsItem, newsIndex) in item.items"
                        v-if="newsIndex > 0"
                        :key="newsIndex"
                      >
                        <img :src="`${newsItem.thumb_url ? newsItem.thumb_url : getPath('default_picture.png')}`">
                        <p class="news-title">{{newsItem.title}}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <channel-list-footer>
                  <template slot="append">
                    <div
                      class="edit-btn pointer"
                      @click="$router.push({path:'/channel/weChatPublicUeditorSourceAdd',query: {attach_id: item.id}})"
                    ><i class="el-icon-edit"></i></div>
                    <div
                      class="del-btn pointer"
                      @click="delTableItem(item.id)"
                    ><i class="el-icon-delete"></i></div>
                  </template>
                </channel-list-footer>
              </div>
            </div>
          </el-col>
          <el-col
            :span="24"
            v-if="tableFormatData.userTable.tableData.length == 0"
          >
            <div
              class="flex-row  flex-justify-c flex-align-c"
              style="min-height:400px;color:#c3c3c3;font-size:18px;"
            ><i
                class="el-icon-search"
                style="margin-right:10px;"
              ></i><span>暂无素材</span></div>
          </el-col>
        </el-row>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.userTable.pagination.page"
            :page-sizes="tableFormatData.userTable.pagination.pagesizes"
            :page-size.sync="tableFormatData.userTable.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData?tableFormatData.userTable.pagination.total : 0"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getMaterialList,
  deleteMaterial
} from '@/api/channel'
import ChooseFiles from '@/components/ChooseFiles/index'
import mixins from '@/mixins/mixins'
import channelSource from './mixins/channelSource'
import channelListHeader from './components/channelListHeader'
import channelListFooter from './components/channelListFooter'
import channelSourceLoding from './components/channelSourceLoding'
export default {
  mixins: [mixins.getters('Table'), channelSource],
  name: 'WeChatPublicImageSource',
  components: {
    ChooseFiles,
    channelListHeader,
    channelListFooter,
    channelSourceLoding
  },
  computed: {
    getPath() {
      return function(path) {
        return (path.includes('https://') || path.includes('http://')) ? `${path}` : require(`@/assets/custorm_style/${path}`)
      }
    }
  },
  data() {
    return {
      chooseFilesConfig: {
        type: ['image'],
        model: 'normal',
        initList: [],
        file_type: 'image',
        uploadConfig: {
          params: {
            mode: 'perm'
          }
        }
      },
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: getMaterialList,
            delList: deleteMaterial
          },
          tableData: [],
          files: {
            type: 'news'
          },
          change: {

          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
@import "~@/views/channel/styles/source.scss";
</style>

